<template>
  <div class="search">
   <van-search 
   v-model="value" 
   shape="round" 
   placeholder="请输入搜索关键词" 
   />
   <div class="search_wrap">
     <h2 class="hot_title">热门搜索</h2>
     <div class="hot_name_wrap">
       <span 
       v-for="(item,index) in hotList"
       :key="index"
       class="hot_item"
       >{{item.first}}</span>
     </div>
   </div>
  </div>
</template>

<script>
import { getHotListAPI } from '@/api'
export default {
data () {
  return {
    hotList:[]
  }
},
created () {
  getHotListAPI().then(resp=>{
    this.hotList = resp.data.result.hots
  })
}
}
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>